<template>
	<div class="pg">
		<MyHeader />
		<img class="line" src="@/static/images/line.png" alt="" />
		<img class="zjpf" src="@/static/images/zjpf.png" alt="" />
		<div class="content" v-if="model.item.name">
			<div class="model">
				<div class="arrow left" @click="last">
					<img src="@/static/images/arrow_l.png" alt="" />
				</div>
				<div class="center">
					<div class="center-box">
						<p class="myfont">{{ model.item.name }}</p>
					</div>
				</div>
				<div class="arrow rigth" @click="next">
					<img src="@/static/images/arrow_r.png" alt="" />
				</div>
			</div>
			<div class="gaj-name myfont">
				{{ model.item.company }}
			</div>
			<div class="pf-control" v-if="model.score == null">
				<MyInput
					class="myinput"
					v-model="grade"
					type="number"
					label="开始评分"
					placeholder="请输入分数"
				/>
				<div class="confirm myfont" @click="confirm">提交</div>
			</div>
			<div class="pf-control-end" v-else>
				<div>{{ model.score || '暂无评分' }}</div>
				<div class="next" @click="nextItem">查看下一个</div>
			</div>
		</div>
		<div v-else>
			暂无项目
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import MyHeader from '../components/MyHeader.vue';
import MyInput from '@/views/components/MyInput.vue';
import { mapState } from 'vuex';
import { IModel, IState } from '@/types/app';
import qs from 'qs';
import http from '@/http';

export default Vue.extend({
	components: {
		MyHeader,
		MyInput
	},
	props: {},
	data() {
		return {
			index: Number(this.$route.query.index) || 0,
			grade: ''
		};
	},
	computed: {
		...mapState({
			models: (state: any) => state.models,
			model: (state: any) => state.model,
			user: (state: any) => state.user,
			modelScore: (state: any) => state.modelScore
		})
	},
	watch: {
		index(n, o) {
			this.grade = '';
		}
	},
	created() {},
	mounted() {},
	methods: {
		last() {
			if (this.index <= 0) return;
			this.index--;
		},
		next() {
			if (this.index >= this.models.length - 1) return;
			this.index++;
		},
		confirm() {
			if (this.grade.trim() == '') {
				this.$createToast({
					type: 'txt',
					txt: '请输入编号'
				}).show();
				return;
			}
			if (
				!(
					parseFloat(this.modelScore.minScore) <= parseFloat(this.grade) &&
					parseFloat(this.grade) <= parseFloat(this.modelScore.maxScore)
				)
			) {
				this.$createDialog({
					type: 'alert',
					content: `请输入数值小于或等于${this.modelScore.maxScore}的分数`
				}).show();
				return;
			}
			let loading = this.$createToast({
				txt: '请稍候...',
				mask: true
			});
			loading.show();
			this.$http
				.post(
					'/pf/makeScore?' +
						qs.stringify({
							judgesId: this.user.judgeId,
							compeId: this.user.compeId,
							itemId: this.model.item.itemId,
							score: parseFloat(this.grade)
						})
				)
				.then(async (res) => {
					await this.$store.dispatch('getItem', {
						judgesId: this.user.judgeId,
						compeId: this.user.compeId
					});
					loading.hide();
				})
				.catch((err) => {
					console.log(err);
					loading.hide();
				});
		},
		nextItem() {
			http
				.post<IModel>(
					'/login/getScoringItemAndScore?' +
						qs.stringify({
							judgesId: this.user.judgeId,
							compeId: this.user.compeId
						})
				)
				.then((res) => {
					console.log(res.data);
					if (res.data.item == null || res.data.item.itemId === this.model.item.itemId) {
						this.$createDialog({
							type: 'alert',
							content: `暂无进行中项目`
						}).show();
						return;
					}
					this.$store.commit('setModel', res.data);
				})
				.catch((err) => {});
		}
	}
});
</script>

<style lang="less" scoped>
.pg {
	width: 100%;
	height: 100vh;
	background: #0f0f9a url('~@/static/images/bg.png') 0 0 no-repeat;
	background-size: 100% 103%;

	display: flex;
	flex-direction: column;

	.zjpf {
		width: 240px;
		align-self: center;
		margin-top: 84px;
		margin-bottom: 58px;
	}

	.content {
		display: flex;
		flex-direction: column;

		.model {
			display: flex;
			align-items: center;
			justify-content: center;
			.arrow {
				width: 60px;
				height: auto;
				font-size: 0;
				&.left {
					text-align: right;
				}

				&.right {
					text-align: left;
				}
				img {
					width: 44px;
					height: 74px;
				}
			}
			.center {
				width: 568px;
				height: 71px;
				line-height: 71px;
				background: url('~@/static/images/center.png') 0 0 no-repeat;
				background-size: 568px 71px;
				text-align: center;
				padding: 0 20px;
				&-box {
					width: 100%;
					overflow: hidden;
					p {
						display: inline-block;
						white-space: nowrap;
						font-size: 38px;
						color: #f9c980;
						// animation: move 3s infinite alternate linear;
						padding: 0 10px;
					}
					@keyframes move {
						0% {
							transform: translate(0, 0);
						}
						100% {
							transform: translate(calc(-100% + 508px), 0);
						}
					}
				}
			}
		}
		.gaj-name {
			color: #fff;
			font-size: 33px;
			text-align: center;
			margin-top: 22px;
		}
		.pf-control {
			align-self: center;

			.myinput {
				align-self: center;
				margin-top: 170px;
			}
			.confirm {
				align-self: center;
				width: 249px;
				height: 79px;
				line-height: 79px;
				text-align: center;
				background: url('~@/static/images/btn.png') 0 0 no-repeat;
				background-size: 249px 79px;
				color: #24e5e5;
				margin: 180px auto 0;
			}
		}
		.pf-control-end {
			font-size: 120px;
			color: #fff;
			height: 100px;
			margin-top: 200px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.next {
				text-decoration: underline;
				color: #fff;
				font-size: 28px;
				padding: 20px;
				margin-top: 30px;
			}
		}
	}
}
</style>
